<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

<c:choose>
	<c:when test="${pageTitle!=null}">
		<title>${pageTitle}</title>
	</c:when>
	<c:otherwise>
		<title><tiles:insertAttribute name="title" ignore="true" /></title>
	</c:otherwise>
</c:choose>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="icon" type="image/png" href="<c:url value='/images/favicon.png'/>">
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:200,300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/foundation.min.css'/>">
<link rel="stylesheet" type="text/css" href="<c:url value='/css/carousellHome.css'/>">

<style>
#hiring {
	text-align: center;
	margin: 0;
	padding: 10px;
	background-color: #333;
	color: #eee;
}

#hiring a {
	color: #00C0FF;
}

#footer {
	height: auto;
	font-family: 'Raleway', 'sans-serif';
	font-size: 14px;
	padding: 40px 0;
}

#footer a {
	color: white !important;
}

#footer p {
	line-height: 1.625em !important;
	margin-bottom: 0;
	font-size: 14px;
}

#footer strong {
	margin-bottom: 1em !important;
	display: block;
	font-family: 'Helvetica', 'sans-serif'
}

#footer .container {
	width: 100%;
	max-width: 1100px;
	margin: auto;
	color: white !important;
}

#footer .container .col-lg-2 {
	width: 16.6%;
	float: left;
}

#footer .container .col-lg-10 {
	width: 83.4%;
	float: left;
	text-align: left;
}

[class*='col'] {
	float: left;
	text-align: left;
}

.col-lg-2 {
	width: 16.6%;
}

.col-lg-10 {
	width: 83.4%;
}

.col-lg-3 {
	width: 25%;
}

@media ( max-width : 767px) {
	.col-md-6 {
		width: 50%;
		min-height: 120px;
		padding: 0 40px;
	}
}

@media ( max-width : 480px) {
	#hiring a {
		margin-top: 7px;
		display: block;
	}
}
</style>
</head>
<body>
	<div id="hiring">
		Interested in joining the Carousell team? <a href="http://careers.carousell.com" target="_blank">Come work with us!</a>
	</div>
	<div class="bodyContainer">
		<div class="row">
			<div id="carousellLogoRow">
				<img src="<c:url value='/images/carousellLogo.png'/>" alt="CarousellLogo" id="carousellLogo">
			</div>
			<div class="imageContainer">
				<img src="<c:url value='/images/carousell.png'/>" alt="Carousell">
			</div>
			<h2 id="appSubtitle">Sell in a Snap. Buy with a Chat.</h2>
			<p id="appSubtitle2">
				Carousell is the top marketplace app for person-to-person buying and selling on iPhone & Android smartphones! Snap a photo to sell your unused and
				secondhand clutter easily in 30s with free listings. And online shopping is as easy as chatting with sellers on the go!<br /> <br />Plus, shop millions of
				the best preloved and brand new deals online! Enjoy great discounts on fashion dresses and shoes, nail art and beauty makeup, baby and kids accessories,
				electronic gadgets, laptops and more! Get the app now!
			</p>

			<div class="appButtons">
				<a href="https://itunes.apple.com/app/id548607187"><img src="<c:url value='/images/badge_ios.png'/>" alt="badge_ios" class="itunesButton"></a> <a
					href="https://play.google.com/store/apps/details?id=com.thecarousell.Carousell"><img
					src="<c:url value='/images/badge_android.png'/>" alt="badge_android"
					class="androidButton"></a>
			</div>

			<div class="shareButtonsTop">
				<!--Facebook-->
				<div class="fb-like" data-href="https://carousell.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
				<!-- Twitter -->
				<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://carousell.com" data-align="left" data-text="Join me on Carousell!"
					data-via="thecarousell">Tweet</a>
				<!-- Google+ -->
				<div class="g-plusone" data-size="medium" data-href="https://carousell.com"></div>
			</div>
		</div>

		<!--Benefits-->
		<div class="row">
			<h3 class="title">Benefits</h3>
			<div class="large-4 columns centered-text" class="benefitRows">
				<div class="benefitBox">
					<div class="benefitBoxinner">
						<div class="benefitBoxtext">
							<h3>1. Super Simple Selling</h3>
							<div class="benefitBoxtext2">Simply snap a photo, describe it, and list your item. It's never been easier to sell your ever-increasing pile of
								clothes, gadgets, &amp; accessories that are new or barely used. And it's free!</div>
						</div>
					</div>
				</div>
			</div>

			<div class="large-4 columns centered-text" class="benefitRows">
				<div class="benefitBox">
					<div class="benefitBoxinner">
						<div class="benefitBoxtext">
							<h3>2. Discover Huge Savings</h3>
							<div class="benefitBoxtext2">Uncover hidden gems to save up to 80% off retail prices! Discover new stuff with thousands of listings added each
								week.</div>
						</div>
					</div>
				</div>
			</div>

			<div class="large-4 columns centered-text" class="benefitRows">
				<div class="benefitBox">
					<div class="benefitBoxinner">
						<div class="benefitBoxtext">
							<h3>3. Save Time & Money</h3>
							<div class="benefitBoxtext2">Skip shipping fees & save traveling time when you buy from people near your home, school or office. You travel to
								these places all the time anyway.</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--Testimonials-->
		<div id="testimonialRow">
			<h3 class="title">Testimonials</h3>
			<div class="testimonialBox">
				<div class="testimonialBoxinner">
					<div class="testimonialBoxtext">
						<h3>More Responses</h3>
						<div class="testimonialBoxtext2">"Just created an account yesterday and sold 3 items within the same day of posting, and I have 2 other items
							pending." --Chanelmagic05</div>
					</div>
				</div>
			</div>

			<div class="testimonialBox">
				<div class="testimonialBoxinner">
					<div class="testimonialBoxtext">
						<h3>Now I can sell from my phone!</h3>
						<div class="testimonialBoxtext2">" Love this app! It's really, really easy and speedy to post things up for sale. I managed to sell some of my items
							and also grabbed many cheap steals!" --daphne90</div>
					</div>
				</div>
			</div>

			<div class="testimonialBox">
				<div class="testimonialBoxinner">
					<div class="testimonialBoxtext">
						<h3>Super fun and simple!</h3>
						<div class="testimonialBoxtext2">" This app is awesome. I have sold many items and gotten over $2500 back in cash! One word, AWESOME. " --ritzy</div>
					</div>
				</div>
			</div>
		</div>

		<!--GET THE APP-->
		<div class="row">
			<h3 class="title">Get the free app now!</h3>
			<div class="appButtons">
				<a href="https://itunes.apple.com/app/id548607187"><img src="<c:url value='/images/badge_ios.png'/>" alt="badge_ios" class="itunesButton"></a> <a
					href="https://play.google.com/store/apps/details?id=com.thecarousell.Carousell"><img
					src="<c:url value='/images/badge_android.png'/>" alt="badge_android"
					class="androidButton"></a>
			</div>

		</div>
	</div>

	<!--Footer-->
	<div id="footer">
		<div class="container">
			<p>
				<!--Facebook-->
			<div class="fb-like" data-href="https://carousell.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
			<!-- Twitter -->
			<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://carousell.com" data-align="left" data-text="Join me on Carousell!"
				data-via="thecarousell">Tweet</a>
			<!-- Google+ -->
			<div class="g-plusone" data-size="medium" data-href="https://carousell.com"></div>
			</p>
			<br> <br>
			<div class="row">
				<div class="col-lg-3 col-md-6">
					<strong>Be a seller</strong>
					<p>
						<a href="ig/" target="_blank">Instagram Importer</a>
					</p>
					<p>
						<a href="join" target="_blank">Join the Community</a>
					</p>
				</div>
				<div class="col-lg-3 col-md-6">
					<strong>Community</strong>
					<p>
						<a href="http://blog.carousell.com/" target="_blank">Blog</a>
					</p>
					<p>
						<a href="https://twitter.com/CarousellStatus" target="_blank">Server Updates</a>
					</p>
					<p>
						<a href="http://help.carousell.com">FAQ</a>
					</p>
				</div>
				<div class="col-lg-3 col-md-6">
					<strong>Say Hello</strong>
					<p>
						<a href="press/" target="_blank">Press</a>
					</p>
					<p>
						<a href="http://contact.carousell.com/" target="_blank">Contact Us</a>
					</p>
					<p>
						<a href="http://careers.carousell.com/" target="_blank">Careers</a>
					</p>
				</div>

				<div class="col-lg-3 col-md-6">
					<strong>Follow Carousell</strong>
					<p>
						<a href="http://fb.com/thecarousell" target="_blank">Facebook</a>
					</p>
					<p>
						<a href="https://twitter.com/thecarousell" target="_blank">Twitter</a>
					</p>
					<p>
						<a href="http://instagram.com/thecarousell" target="_blank">Instagram</a>
					</p>
					<p>
						<a href="http://pinterest.com/thecarousell" target="_blank">Pinterest</a>
					</p>
					<p>
						<a href="http://youtube.com/carousellTV" target="_blank">Youtube</a>
					</p>
					<p>
						<a href="http://thecarousell.tumblr.com" target="_blank">Tumblr</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>